<template>
  <div class="login-body">
    <!-- header -->
    <shop-header>注册新账号</shop-header>
    <div class="login-box">
      <div class="login-title">注册新账号</div>
      <text-field ref="mobile" show type="number" placeholder="请输入手机号" />
      <text-field ref="realName" show type="text" placeholder="您的真实姓名" />
      <text-field ref="recommendMobile" show type="number" placeholder="推荐人手机号" />
      <text-field ref="password" type="password" placeholder="请输入登录密码" />
      <mt-button type="primary" size="large" @click="register">注册</mt-button>
    </div>
  </div>
</template>

<script>
import { Field } from 'mint-ui';
import { Button } from 'mint-ui';
import request from '../utils/request.js';
import util from '../utils/util.js';
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import field from '../components/field';
import Header from '../components/header';
import { Indicator } from 'mint-ui';


export default {
  components: {
    Field,
    Button,
    Toast,
    MessageBox,
    TextField: field,
    shopHeader: Header,
  },
  data () {
    return {
      shopPhone: '',
      shopPwd: '',
    };
  },
  created() {
  },
  methods: {
    register() {
      const mobile = this.$refs.mobile.val;
      const realName = this.$refs.realName.val;
      const recommendMobile = this.$refs.recommendMobile.val;
      const password = this.$refs.password.val;
      if(!util.checkMobile(mobile)) {
        util.toast("清输入格式正确的手机号!");
        return;
      }
      if(!realName) {
        util.toast("真实姓名不能为空!");
        return;
      }
      if(!util.checkMobile(recommendMobile)) {
        util.toast("清输入格式正确的推荐人手机号!");
        return;
      }
      if(!util.checkPassword(password)) {
        util.toast("密码长度6-15位且必须同时包含数字和字母");
        return;
      }
      Indicator.open("正在注册");
      let data = {mobile:mobile, realName:realName, recommendMobile:recommendMobile, password:password};
      request(data, "/ajax/register").then(res => {
        Indicator.close();
        if(util.warnFunc(res)) return;
        if(res.code == 0){
          localStorage.setItem("loginToken", res.msg);
          let dataStr = localStorage.getItem("loginUser");
          let userArr = [];
          if(dataStr && dataStr.length > 0) {
            let user = JSON.parse(dataStr);
            if(user instanceof Array){
              userArr = user;
            }else{
              userArr.push(user);
            }
          }
          userArr.push(data);
          localStorage.setItem("loginUser", JSON.stringify(userArr));
          this.$router.push({
            path: '/',
          });
        }
      });
    }

  },
}

</script>

<style scoped>
.login-body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box {
  width: 80%;
  border-radius: 5px;
}
.login-title {
  text-align: left;
  padding: 10px 0;
  font-size: 28px;
  margin-bottom: 40px;
}
.mint-button {
  margin-top: 40px;
}
</style>
